import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'

export default class Footer extends Component {
  static propTypes = {
    todos: PropTypes.array.isRequired,
    resetAllSelect: PropTypes.func.isRequired,
    selectAll: PropTypes.func.isRequired
  }

  render() {
    const { todos, resetAllSelect, selectAll } = this.props
    const selectNum = todos.filter((item) => item.isDone).length
    const totalNum = todos.length

    return (
      <div className="footer-box">
        <input
          type="checkbox"
          name="selectAll"
          id="selectAll"
          checked={totalNum === selectNum && totalNum ? true : false}
          onChange={(event) => selectAll(event.target.checked)}
        />
        <div>
          已选{selectNum}/总共{totalNum}
        </div>
        <button onClick={() => resetAllSelect()}>清空所有选择</button>
      </div>
    )
  }
}
